在昨天的 Day 19 中，我們成功實現了 LINE 語音訊息自動轉文字（STT），讓使用者能透過「口述」無摩擦地發布任務。今天我們要繼續將多模態（Multimodal）輸入層推向極致——導入視覺圖像辨識（Vision / OCR）！

在日常工作與生活中，待辦事項常常散落於手寫筆記本、會議白板、紙本發票，或是隨手截圖的通知畫面。今天我們要透過 n8n 接收 LINE 傳來的圖片，並串接 OpenAI GPT-4o Vision API 進行結構化文字與意圖萃取，實現「拍下白板或筆記，自動提煉並建立 Notion/Google Calendar 任務」的全自動管線！

為什麼選擇 GPT-4o Vision 處理圖像輸入？

1. 超越傳統 OCR 的語意理解能力：傳統 OCR 僅能將圖片中的字元粗暴轉為文字，無法辨識關聯性；GPT-4o 能同時完成「文字辨識（OCR）」與「上下文語意提煉（LLM）」，直接從手寫草字或雜亂表格中抓取真正的 Task、Priority 與 Time。
2. 零打字的極致體驗：開完會拍下白板，或拍下展覽海報/繳費單，無需手動輸入任何字元即可完成排程。
3. 無縫串接既有邏輯：圖片解析後的結構化 JSON，能直接接回我們建好的 If 時間分流與多平台落地流程。

核心實作步驟說明

1. 解析 LINE 圖片訊息 Payload 與取得 Image ID

• 當使用者在 LINE 傳送圖片（Image）時，LINE Webhook 事件型態會顯示為 message.type == "image"。
• 提取關鍵欄位：
• 訊息 ID (Message ID)：{{ $json.body.events[0].message.id }}
• 即時回覆金鑰 (Reply Token)：{{ $json.body.events[0].replyToken }}

2. 呼叫 LINE Content API 下載圖片並轉為 Base64

• 在 n8n 中新增 HTTP Request 節點，下載圖片二進位檔案：

• Method：GET

• URL：[https://api-data.line.me/v2/bot/message/](https://api-data.line.me/v2/bot/message/){{ $json.body.events[0].message.id }}/content

• Headers：Authorization: Bearer <LINE Access Channel Token>

• Response Format：選擇 File / Binary Data。

• 使用 n8n 的 Code 節點或內建工具，將圖片 Binary Data 轉碼為 base64 字串，準備餵給 Vision API。

3. 串接 OpenAI GPT-4o Vision API 進行視覺萃取

• 新增 HTTP Request 節點，呼叫 OpenAI Chat Completions 端點：
• Method：POST
• URL：[https://api.openai.com/v1/chat/completions](https://api.openai.com/v1/chat/completions)
• Headers：Authorization: Bearer <OpenAI API Key>
• JSON Body：

{
  "model": "gpt-4o",
  "messages": [
    {
      "role": "user",
      "content": [
        {
          "type": "text",
          "text": "請辨識這張圖片中的手寫筆記或文字內容，提取出待辦事項清單。請僅輸出標準 JSON 格式：[{\"task\": \"任務名稱\", \"priority\": \"High|Medium|Low\", \"time\": \"ISO時間或空字串\", \"has_exact_time\": true|false}]"
        },
        {
          "type": "image_url",
          "image_url": {
            "url": "data:image/jpeg;base64,{{ $json.base64Image }}"
          }
        }
      ]
    }
  ]
}

4. 落地至 Notion/行事曆與 LINE 即時回覆

• 將 Vision API 輸出的 JSON 字串，經過 JavaScript 節點拆解為獨立 Items。
• 走入既有的 If 條件分流 ➔ Notion 看板 / Google Calendar 自動寫入。
• 最終由 LINE Reply API 回覆告知使用者：

📸 *圖片視覺辨識完成！*

✅ *已自動提取並建立 2 筆待辦任務*：
1. 📋 購買會議水果｜⏰ 今晚 18:00
2. 📋 整理 Q3 財務報表｜⏰ 下週五前

今天我們完成了「文字、語音、圖像」三種全方位多模態輸入的最後一塊拼圖，讓 AI 待辦系統無論面對何種情境都能輕鬆輸入。明天「Day 21」我們將進入 AI Agent 的進階核心——「Dify Workflow 進階編排：整合 Web Search 網頁搜尋與自動補充行程資訊」！